<template>
    <div class="all">
        <el-row style="min-height: 400px;">
            <el-col :style="{ height: bannerHeight + 'px', backgroundColor: bannerBackColor }" :span="7"
                class="banner-back">
            </el-col>
            <el-col :span="10">
                <div ref="col">
                    <el-carousel indicator-position="outside" @change="changeBanner">
                        <el-carousel-item v-for="item in imgs" :key="item.url">
                            <el-image style="width: 100%;" :src="item.url"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-col>
            <el-col :style="{ height: bannerHeight + 'px', backgroundColor: bannerBackColor }" :span="7"
                class="banner-back">
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="16" :offset="4">
                <div class="home-box task">
                    <!-- 标题 -->
                    <div class="title-box">
                        <div class="title-box-left">
                            代办任务（2个）
                        </div>
                        <div class="title-box-right">
                            <span>
                                查看更多
                            </span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>

                    <div class="home-box-aside">
                        <div class="task-box" v-for="(item, index) in taskList" :key="index">
                            <div class="task-box-aside">
                                <div style="display: flex;justify-content: space-between">
                                    <span>{{ item.typename }}</span>
                                    <span style="color:#2B9939">{{ item.status }}</span>
                                </div>
                                <div class="" style="display: flex;align-items: center;">
                                    <el-image style="width: 60px" :src="require('@/assets/imgs/home-exam.png')"></el-image>
                                    <div style="width: 70%;padding-left: 10px;display: flex;flex-direction: column;">
                                        <span style="font-weight: bolder;"> {{ item.name }}</span>
                                        <span style="font-size: 12px;padding-top:10px;color:#A6B6CC"> {{ item.time }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="home-box course">
                    <!-- 标题 -->
                    <div class="title-box">
                        <div class="title-box-left">
                            推荐课程
                        </div>
                        <div class="title-box-right">
                            <span>
                                查看更多
                            </span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                    <div class="home-box-aside">
                        <div class="course-list" v-for="(item, index) in courselist" :key="index">
                            <div class="course-list-aside">
                                <el-image style="width: 275px" :src="require('@/assets/imgs/1.jpg')"></el-image>
                                <div class="course-box">{{ item.name }}</div>
                                <div class="course-box"
                                    style="display: flex;justify-content: flex-end;font-size: 13px;color: #818181;">{{
                                        item.number }}学习
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="home-box lecturer">
                    <div class="title-box">
                        <div class="title-box-left">
                            金牌讲师
                        </div>
                        <div class="title-box-right">
                            <span>
                                查看更多
                            </span>
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div style="height: 100px;"></div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            imgs: [
                {
                    url: require('@/assets/imgs/home1.jpeg')
                },
                {
                    url: require('@/assets/imgs/home2.jpeg')
                }
            ],
            bannerHeight: 300,
            bannerBackColor: '#399AA3',
            taskList: [
                {
                    typename: '考试',
                    status: '进行中',
                    name: '每月小考',
                    time: '2024-09-01 00:00 2024-10-01 00:00'
                },
                {
                    typename: '考试',
                    status: '进行中',
                    name: '每月小考',
                    time: '2024-09-01 00:00 2024-10-01 00:00'
                },
                {
                    typename: '考试',
                    status: '进行中',
                    name: '每月小考',
                    time: '2024-09-01 00:00 2024-10-01 00:00'
                },
            ],
            courselist: [
                {
                    name: '财务管理系列课程',
                    number: 1,
                },
                {
                    name: '财务管理系列课程',
                    number: 1,
                },
                {
                    name: '财务管理系列课程',
                    number: 10,
                },
                {
                    name: '财务管理系列课程',
                    number: 10,
                }
            ]

        }
    },
    mounted() {
        this.bannerHeight = this.$refs.col.clientHeight
    },
    methods: {
        changeBanner(e) {
            if (e) {
                this.bannerBackColor = '#156BF6'
            } else {
                this.bannerBackColor = '#399AA3'
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.all {
    .banner-back {
        transition: 1s;
    }

    .home-box {
        box-sizing: border-box;
        margin-bottom: 50px;

        .home-box-aside {
            display: flex;
            justify-content: flex-start;
            align-items: center;


        }
    }

    .task {
        .task-box {
            width: 33.3%;
            display: flex;
            justify-content: center;

            .task-box-aside {
                width: 385px;
                min-height: 130px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                border-radius: 10px;
                background-color: #F6FAFF;
                box-shadow: 0 0px 2px 0px rgba(0, 0, 0, 0.1);
                box-sizing: border-box;
                padding: 10px;


                >div {
                    width: 100%;
                }
            }

            .task-box-aside:hover {
                box-shadow: 0 6px 20px hsla(0, 0%, 58%, .15);
            }
        }
    }

    .course {
        .course-list {
            width: 25%;
            display: flex;
            justify-content: center;

            .course-list-aside {
                width: 275px;
                min-height: 200px;
                border-radius: 10px;
                background-color: #ffff;
                box-shadow: 0 0px 2px 0px rgba(0, 0, 0, 0.1);
                overflow: hidden;

                .course-box {
                    box-sizing: border-box;
                    padding: 10px;
                }

            }
        }
    }

    .title-box {
        display: flex;
        justify-content: space-between;
        margin: 20px 0 10px 0;
        box-sizing: border-box;
        padding: 0 20px;

        .title-box-left {
            font-size: 24px;
            font-weight: bolder;
        }

        .title-box-right {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #818181;
            cursor: pointer;
        }


    }
}
</style>